<template>
	<view class="dialog_box" v-if="show">
		<view class="bg" @click="hideDialog()"></view>
		<view class="dialog_content">
			<view class="bag">
				<view class="bag_header">
					<image mode="widthFix" src="@/static/header_top.png"></image>
				</view>
				<view class="bag_body">
					<scroll-view scroll-y="true" class="ul">
						<view class="li" v-for="(val,ind) in info.list">
							<image class="left" src="@/static/bag.png"></image>
							<view class="right">
								<view class="name">{{val.name}}</view>
								<view class="tip">{{val.name}}</view>
								<view class="price">
									满<label class="big" v-text="val.min"></label>减<label class="big" v-text="val.money"></label>
								</view>
								<view class="buy">超值抢用</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="dialog_foot"  @click="hideDialog()">
				<icon class="close" type="cancel" size="26" color="#fff"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["dataInfo"],
		data() {
			return{
				show:false,
				info:this.dataInfo
			}
		},
		onLoad(){
			
		},
		methods:{
			showDialog(){
				this.show = true;
			},
			hideDialog(){
				this.show = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dialog_box{
			position: absolute;
			left: 0;
			top:0;
			right: 0;
			bottom: 0;
			z-index: 99;
			.bg{
				position: absolute;
				left: 0;
				top:0;
				right: 0;
				bottom: 0;
				z-index: 1;
				background-color: rgba(0,0,0,0.5);
			}
			.dialog_content{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				z-index: 10;
				text-align: center;
				
				.bag{
					position: relative;
					width: 600rpx;
					margin:15% auto 0;
					.bag_header{
						image{
							width: 100%;
						}
					}
					.bag_body{
						height: 700rpx;
						margin:-20rpx auto;
						background-color: #e61e1e;
						border-bottom-left-radius: 16rpx;
						border-bottom-right-radius: 16rpx;
						.ul{
							padding-top: 20rpx;
							height: calc(100% - 40rpx);
							.li{
								margin: 20rpx;
								border-radius: 16rpx;
								background-color: #FFFFFF;
								font-size: 0;
								text-align: left;
								.left,.right{
									vertical-align: top;
									display: inline-block;
								}
								.left{
									width: 200rpx;
									height: 200rpx;
								}
								.right{
									height: 200rpx;
									margin-left: 20rpx;
									width: calc(100% - 220rpx);
									position: relative;
									.name,.tip{
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
									.name{
										font-size: 40rpx;
										color: #000;
										line-height: 80rpx;
									}
									.tip{
										font-size: 20rpx;
										color: #dbdee5;
									}
									.price{
										font-size: 20rpx;
										line-height: 80rpx;
										color: #fe5f59;
										.big{
											font-size: 40rpx;
											font-weight: 700;
										}
									}
									.buy{
										position: absolute;
										right: 0;
										bottom: 20rpx;
										padding:0 20rpx;
										margin-right: 20rpx;
										height: 60rpx;
										line-height: 60rpx;
										text-align: center;
										font-size: 30rpx;
										color: #fff;
										font-weight: 700;
										border-radius: 64rpx;
										background: linear-gradient(to right,#ff6b13,#ff4656);
									}
								}
							}
						}
					}
				}
			}
			.dialog_foot{
				margin-top: 40rpx;
				text-align: center;
			}
		}
	
</style>
